<template>
  <div>
    <van-search
      v-model="Search"
      shape="round"
      background="#eb4450"
      placeholder="请输入搜索关键词"
      @click="SearchPage"
    />
    <!-- 轮播图 -->
    <div class="swiper_wrap">
      <van-swipe :autoplay="4000">
        <van-swipe-item v-for="(v,index) in imgs" :key="index">
          <img :src="v.image_src" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="catitems">
      <a href="javascript:;" v-for="(item,index) in catitemsList" :key="index">
        <img :src="item.image_src" alt />
      </a>
    </div>
    <!-- 展示 -->
    <div class="goods_show">
      <div class="goods_item" v-for="(v,index) in goods_show" :key="index">
        <div class="goods_title">
          <img :src="v.floor_title.image_src" alt />
        </div>
        <div class="goods_detail">
          <img :src="v1.image_src" v-for="(v1,index1) in v.product_list" :key="index1" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    return {
      Search: '',
      imgs: [
      ],
      catitemsList: [],
      goods_show: []
    }
  },
  created () {
    this.getPageInfo()
  },
  methods: {
    async getPageInfo () {
      // 获取轮播图
      const { data: res } = await this.$http.get('/home/swiperdata')
      if (res.meta.status !== 200) { return this.$message.fail('获取轮播图失败') }
      this.imgs = res.message
      // return this.$message('提示', '获取成功')
      // 获取导航
      const { data: res2 } = await this.$http.get('/home/catitems')
      if (res2.meta.status !== 200) { return this.$message.fail('获取导航失败') }
      // console.log(res2)
      this.catitemsList = res2.message

      // 获取商品列表
      const { data: res3 } = await this.$http.get('/home/floordata')
      console.log(res3)
      if (res3.meta.status !== 200) return this.$message.fail('获取失败')
      this.goods_show = res3.message
    },
    SearchPage () {
      this.$router.push({ name: 'search' })
    }
  }
}
</script>

<style lang="less" scope>
.van-search {
  height: 100% !important;
}
.van-searchbar {
  background-color: #eb4450 !important;
}
.van-searchbar-inner {
  border-radius: 10px;
}
.swiper_wrap {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}
.catitems {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  a {
    text-align: center;
  }
  img {
    flex: 1;
    width: 75%;
  }
}
.goods_show {
  margin-bottom: 90px;
}
.goods_title {
  img {
    padding: 10px 0;
    width: 100%;
  }
}
.goods_detail {
  // box-sizing: border-box;
  img {
    float: left;
    width: 33.3%;
    box-sizing: border-box;
    &:nth-child(2),
    &:nth-child(3) {
      border-bottom: 10px solid #fff;
    }
    &:nth-last-child(-n + 4) {
      height: 27.72711207vw;
      border-left: 10px solid #fff;
    }
  }
  &::after,
  &::before {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }
  zoom: 1;
}
</style>
